import {Link} from 'umi'
import {Button, Divider, Image, Layout, Menu, Space} from 'antd'
import {PieChartOutlined, UserOutlined} from '@ant-design/icons'

import './less/antMotionStyle.less'

import React from 'react'
import Avatar from 'antd/es/avatar/avatar'
import {Footer00DataSource} from './data.source'
import Footer0 from './Footer0'
import ToLogin from '../pages/components/ToLogin'
import LoggedIn from '../pages/components/LoggedIn'
import {Settings} from '@ant-design/pro-layout'

const {Header, Content, Footer} = Layout

export default function BasicLayout({children}) {
    const tailLayout = {
        width: 40,
    }

    return (
        <Layout>
            <Header style={{position: 'fixed', zIndex: 10, width: '100%'}}>
                <Menu theme="dark" mode="horizontal">
                    <Image preview={false} width={80}/>
                    <img
                        align={'middle'}
                        width={37}
                        src="https://i.loli.net/2021/05/15/Du9Lcxyjo4eOA1B.png"
                        alt={'logo'}
                    />
                    <Image preview={false} width={20}/>
                    <Menu.Item key="1">
                        <Link to="/">Home</Link>
                    </Menu.Item>
                    <Menu.Item key="2">
                        <Link to="/translate"> Translate </Link>
                    </Menu.Item>
                    <Menu.Item key="3">
                        <Link to="/language">Language</Link>
                    </Menu.Item>

                    {sessionStorage.getItem('isLogin') === '1' ? (
                        <LoggedIn/>
                    ) : (
                        <ToLogin/>
                    )}
                </Menu>
            </Header>

            {children}
            <Footer0 id="Footer0_0" key="Footer0_0" dataSource={Footer00DataSource}/>
        </Layout>
    )
}
